<template>
	<form class="change-password-modal px-[25px] md:px-[35px] pt-4 pb-10" @submit.prevent="onSubmit">
		<input type="submit" class="hidden" />
		<BaseInput
			v-model="formValue.code"
			:name="FormFieldName.googleSecretCode"
			labelT="set.security.popup.2fa.code">
			<template #suffix>
				<BasePaste @paste="(v) => (formValue.code = v)" />
			</template>
		</BaseInput>
		<BaseInput
			v-model="formValue.password"
			:name="FormFieldName.googleSecretCode"
			labelT="account.password"
			type="password" />
		<BaseButton
			class="mt-10"
			type="primary"
			textT="action.disable"
			:loading="loadingDisable2fa"
			@click="onSubmit" />
	</form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { disable2fa } from '@/api/account'
import { BaseButton, BaseInput, BasePaste } from '@/components/base'
import { FormFieldName } from '@/enums'
import { useRequest } from '@/hooks'
import { useProfileStore } from '@/store'
import { t } from '@/utils'

const profileStore = useProfileStore()
const formValue = reactive({
	code: '',
	password: ''
})

const { run: runDisable2fa, loading: loadingDisable2fa } = useRequest(disable2fa, {
	showError: true,
	showSuccess: t('set.tip.successDisable2fa'),
	onSuccess: () => {
		profileStore.getUserInfo()
		profileStore.show.disable2fa = false
	}
})

const onSubmit = () => {
	runDisable2fa({ ...formValue })
}
</script>

<style scoped></style>
